<template>
  <div>
    <div id="graphChart" style="width:20rem;height:10rem;">123</div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import bus from "@/utils/eventBus"
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
    bus.$on('submit', function(data) {
        console.log("receive");
        console.log(data);
    })
  },
  methods: {
    draw() {

        this.chart = this.$echarts.init(document.getElementById("graphChart"));

        var option;

        this.chart.showLoading();
        this.$.getJSON('http://127.0.0.1:81/api/query/all_risk_fund', function (graph) {
        console.log (graph);
            this.chart.hideLoading();

            graph.nodes.forEach(function (node) {
                node.label = {
                    show: node.symbolSize > 30
                };
            });
            option = {
                tooltip: {},
                legend: [{
                    data: graph.categories.map(function (a) {
                        return a.name;
                    })
                }],
                series: [
                    {
                        name: '基金风险示意图',
                        type: 'graph',
                        layout: 'force',
                        data: graph.nodes,
                        links: graph.links,
                        categories: graph.categories,
                        roam: true,
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        scaleLimit: {
                            min: 0.4,
                            max: 2
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        }
                    }
                ]
            };
            console.log(option);
            this.chart.setOption(option);
        }.bind(this));
    }
  },
  destroyed() {
    window.onresize = null;
  }
};

</script>
<style lang="scss" scoped>
</style>